<style>
@import
url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
/* gotta fetch the font for phone users */
/* c o l o r s & b a c k g r o u n d */
/* if you want to play with the colors, change 'em in the root here */
/* you can also change the background image, and resize your name */
/* if you wanna keep it simple, stick to changing these. or go hog wild */
/* and venture below */
/* changing the color of the spacehey logo is way further down btw */
/* to change the transparency of all the boxes at once, */
/* change the 0.33 of box_color_and_seethru into anything between 0.0 and 1.0 */
/* you can also change the three other numbers to colorise the boxes. */
/* for a list of css color names, check out */
/* https://www.w3schools.com/colors/colors_names.asp */
:root{
--headers: maroon;
--links: indianred;
--text: darksalmon;
--names: mediumaquamarine;
--search: indianred;
--aboutmeheader: indianred;
--online: indianred;
--mynamesize: 35px;
--background_image: url("https://i.imgur.com/Z6bCluL.jpeg");
--cursor: url(‘https://lh3.googleusercontent.com/proxy/sXSvtcuc0iqJ8TlLxkU_zkXekDc6qQkijHX-wcMvNo8yw3R75OnyJ5Qq0Gbea0k0noThLLFpiyDIFcrFfsoUJqWwjA’), auto;
--font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
--box_color_and_seethru: rgba(0, 0, 0, 0.33);
}
/* w h e r e t h e c o l o r s e n d u p */
/* bit messy, this */
h2, h3, h4, h5, .url-info b{ color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
p{color: var(--text) !important;} /* color of text */
h1, .count, .friends a p{color: var(--names) !important;} /* color of names, and friends counter */
nav label{color: var(--search) !important;} /* color of search */
.section h4{color: var(--aboutmeheader) !important;} /* aboutme & want2meet headings */
.online{color: var(--online) !important;} /* color of the 'online' text */
/* f o n t f a m i l y */
/* you can disable the allcaps. most people probably will */
h1, h2, h3, h4, h5, a, p, nav label{
font-family: var(--font-family) !important;
text-shadow: 2px 2px black !important;
text-transform:uppercase !important;
}
/* t h a t ' s a p a d d i n ' */
/* on account of having round corners */
h1, h2, h3, h4, h5, p {padding-left:5px !important;}
/* s i z e o f y o u r n a m e */
/* you can also enable allcaps for it */
h1{
font-size: var(--mynamesize) !important;
text-transform:none !important;
padding-left:10px !important;
}
/* t h e b a c k g r o u n d i m a g e */
/* change the image in the root, everything else here */
/* i should totally put an easy way to make a fullscreen bg here. stay tuned */
body {background-image: var(--background_image) !important;padding:5px !important; background-color: black !important;}
/* here's some ideas (sfw, but you look at random images on the internet at your own risk!! duh!):
https://i.imgur.com/EnMApbN.jpeg
https://i.imgur.com/Z6bCluL.jpeg
https://i.imgur.com/hVhvMoS.jpg
https://i.imgur.com/1MWPDNB.png
https://i.imgur.com/5JST8DK.png
https://i.imgur.com/HviCjeV.jpeg
this one's an xmas wallpaper dump
https://imgur.com/gallery/HZGvN
*/
/* b o x e s */
/* if you want your boxes to look different, go at it here. transparency is tuned in the root*/
.heading, .url-info, .blurbs, .details, .mood, .blog-preview, .friends, .contact, .table{
background-color:var(--box_color_and_seethru) !important;
border-radius: 15px !important;
padding: 8px !important;
border: var(--borders) !important;
}
/* f i n e t u n i n g */
/* table-section doesn't wanna play nice. needs work */
.table-section{border:none !important;background-color:var(--box_color_and_seethru)!important;border-radius: 15px !important;}
.heading{background:none !important;padding-bottom:0px !important;}
/* y o u r f a c e */
@keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-20px);
}
100% {
transform: translatey(0px);
}
}
.general-about .profile-pic img{
border-radius: 200px;
animation: float 3s ease-in-out infinite;
}
/* f a c e s o f f r i e n d s */
.person a:nth-child(2) img{
border-radius: 50%;
transform: rotate(180deg);
animation: rotate 30s ease-in-out infinite;
animation-delay: 3s;
}
@keyframes rotate{
to{transform: rotate(540deg);}
}
a:hover, a:hover *{
transform: scale(1.55);
transition: transform 0.3s;
animation: WIGGLEWIGGLEWIGGLEWIGGLEWIGGLEWIGGLEWIGGLEWIGGLE 3s ease-in-out infinite, cursorgifpointer 1.5s linear infinite;
}
@keyframes WIGGLEWIGGLEWIGGLEWIGGLEWIGGLEWIGGLEWIGGLEWIGGLE{
8%{transform: rotate(-5deg);}
11%{transform: rotate(15deg);}
16%{transform: rotate(-15deg);}
19%{transform: rotate(7deg);}
22%{transform: rotate(-1deg);}
23%{transform: rotate(0deg);}
}
p:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover, li:hover, .profile-pic img{
transform: scale(1.05);
transition: transform 0.3s;
animation: WIGGLEWIGGLEWIGGLEWIGGLEWIGGLEWIGGLEWIGGLEWIGGLE2 3s ease-in-out infinite;
}
img:hover{
transform: rotate3d(0,1,0,1800deg);
transition: transform 3s ease-in-out;
}
@keyframes WIGGLEWIGGLEWIGGLEWIGGLEWIGGLEWIGGLEWIGGLEWIGGLE2{
8%{transform: rotate(-.5deg);}
11%{transform: rotate(1.5deg);}
16%{transform: rotate(-1.5deg);}
19%{transform: rotate(.7deg);}
22%{transform: rotate(-.1deg);}
23%{transform: rotate(0deg);}
}
.details-table tr:nth-child(1) td:nth-child(1) p{width: 0;overflow: hidden;height: 0;}
.details-table tr:not(:first-child){font-size: 100%}
.details-table td{padding:0}
a{display: inline-block;}
/* f a c e s i n c o m m e n t s */
.inner img{
outline:none !important;
filter: hue-rotate(00deg) drop-shadow(1px 1px 2px midnightblue) !important;
border-radius: 15px !important;
}
/* e m b e d d i ng */
/*this works for youtube well enough, dunno about the others. experiment! */
iframe{border-radius: 60px !important;opacity: 0.5 !important;}
/* n a v s t u f f */
/* you know, the thing on top */
nav{background-color:var(--box_color_and_seethru); !important;border-radius: 0px 0px 15px 15px; !important;}
nav ul{background:none !important;}
nav img{filter: opacity(30%) !important;}
nav ul a img, .mood a img{display:none !important;}
.top{background:none !important;background-color:rgba(0, 0, 0, 0.8); !important;}
/* s p a c e h e y l o g o */
/* the color of the spacehey logo can be changed with the help of this awesome tool */
/* https://codepen.io/sosuke/pen/Pjoqqp */
/*you do indeed need the brightness 0 and saturate 100 at the start */
nav img{filter: brightness(0) saturate(100%) invert(10%) sepia(62%) saturate(4593%) hue-rotate(352deg) brightness(98%) contrast(117%) !important;}
/* t h e u r l - i n f o b o x i s h i d d e n b y d e f a u l t */
/* cause who needs it...? delete this line to reveal it */
.url-info{display:none !important;}
/* t a b l e o f i n t e r e s t s */
/* change 0.0 to 0.3 or higher to make the individual cells darker. looks kinda cool */
td {background-color:rgba(0, 0, 0, 0.0) !important;border-radius: 15px !important;}
/* l e t t h e r e b e t r a n s p a r e n c y , a n d r o u n d n e s s */
/* change the last 0.0 to 0.3 to see what happens */
main{background-color:rgba(0, 0, 0, 0.0); !important;border-radius: 15px !important;}
/* n o b o r d e r s a n y w h e r e */
/* unless you want borders. in which case make that number bigger than 0px */
/* if you wanna experiment with borders, make your own variable into the root imo */
.friends th, tr, td, th, .icon, #comments, main, .comments-table, .friends, .profile-info, .table, .table-section, .contact, .url-info, .mood, .blurbs, .blog-preview, .details, .profile-pic img
{
border: 0px dotted white !important;
outline: none !important;
}
/* (. _ . ) */
/* the most illegal move in professional wrestling */
footer{display:none !important;}
/* e x c e p t i o n s e t c . */
.icon{border:none !important;}
.profile-info{border-radius: 15px !important;}
.comments-table{border-radius: 15px !important;border:none !important;}
.table-section{padding-bottom:7px !important;}
#comments{margin-top:15px !important;padding-bottom:15px !important}
/* n o o b h a c k e r y */
/* all this to keep the "forward to friend" from overflowing with comic sans. wip */
.contact, .f-row, .f-col{padding-left:0px !important;margin-left:0px !important;margin-right:0px !important;padding-right:0px !important;}
.contact{padding-left:2px !important;}
.f-row{margin-bottom:3px !important;padding-bottom:0px !important;padding-top:2px !important;margin-top:0px !important;}
.f-col a{margin-left:-2px !important;padding-left:-2px !important;}
.contact{padding-bottom:12px !important;}
/* s e a r c h b a r */
/* color the search bar using colors from root */
.search-wrapper input[type=text] {background-color: rgba(0, 0, 0, 0.5) !important;border: 1px dotted var(--headers) !important;color:var(--names) !important;border-radius: 10px !important;}
button{border-radius: 10px !important;border: 1px dotted var(--headers) !important;font-family: var(--font-family) !important;background-color:rgba(0, 0, 0, 0.5) !important;color:var(--headers) !important;}
/* cursor */
/* Start http://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/mechanics/mec-1/mec5.cur), auto !important;} /* End http://www.cursors-4u.com */
/* that's all she wrote */
/* author: spacehey.com/meh */
/* here's hoping 2021 turns out better */
</style>